<template>
    <div class="detail-form" v-if="loadingFinish" >
    <Form :model="formInfo" ref="formInfo" class="ivu-form-no-margin-bottom form" :rules="rule" :label-width="120">
        <Row :gutter="32" class="code-row-bg">
            <Col span="8" style="border: none">
            <FormItem prop="serialNumber" label="序号">
            <Input v-model="formInfo.serialNumber" :maxlength="50"  
                placeholder="请输入序号" clearable>
            </Input>
            </FormItem>
            </Col>
            <Col span="8" style="border: none">
            <FormItem prop="stationName" label="车站名称">
            <Input v-model="formInfo.stationName" :maxlength="50" 
                placeholder="请输入车站名称" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="stationJaneSpell" label="车站简拼">
            <Input v-model="formInfo.stationJaneSpell" :maxlength="50"  
                placeholder="请输入车站简拼" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="stationTelegraphicCode" label="车站电报码">
            <Input v-model="formInfo.stationTelegraphicCode" :maxlength="50" 
                placeholder="请输入车站电报码" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="allJaneSpell" label="车站全拼">
            <Input v-model="formInfo.allJaneSpell" :maxlength="50" 
                placeholder="请输入车站全拼" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="province" label="省份名称">
            <Input v-model="formInfo.province" :maxlength="50" 
                placeholder="请输入省份名称" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="cityHierarchyLevel2" label="城市名称">
            <Input v-model="formInfo.cityHierarchyLevel2" :maxlength="50" 
                placeholder="请输入城市名称" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="hasSameCityStationFlag" label="同城车站标识">
                <Select v-model="formInfo.hasSameCityStationFlag" placeholder="请选择同城车站标识"  clearable >
                  <Option :value="0">不存在</Option>
                  <Option :value="1">存在</Option>
                </Select>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="sameCityCode" label="同城编号"
            :rules="{ required: haveSameStation, message: '请输入同城编号', trigger: 'blur' }">
            <Input v-model="formInfo.sameCityCode" :maxlength="50" 
                placeholder="请输入同城编号" clearable>
            </Input>
            </FormItem>
        </Col>
        <Col span="8" style="border: none">
            <FormItem prop="einvoiceSupportStatus" label="电子发票标识">
                <Select v-model="formInfo.einvoiceSupportStatus" placeholder="请选择电子发票标识"  clearable >
                  <Option :value="0">不支持</Option>
                  <Option :value="2">仅线上支持</Option>
                  <Option :value="3">仅线下支持</Option>
                  <Option :value="1">支持</Option>
                </Select>
            </FormItem>
        </Col>
        </Row> 
    </Form>
    </div>
</template>
<script>
  import { apiTrainStationAdd } from '@api/trip/standard/trainStation.js'
  import debounce from "lodash/debounce";
  export default {
    name: 'trip-train-station-manager-detail',
    components: { 
    },
    props: { 
        TrainStation: {
        type: Object, 
      },
      disabled:{
        type:Boolean,
        default:false, 
        required: false,
      }
    },
    data() { 
      return { 
        loadingFinish:false, 
        formInfo: { 
            id:'',
            serialNumber: null, //序号
            stationName: '', //车站名称
            stationJaneSpell: '', //车站简拼
            stationTelegraphicCode: '', //车站电报码
            allJaneSpell: '', //车站全拼
            hasSameCityStationFlag: '', //是否存在同城车站标识。0:不存在同城站,1:存在同城站
            sameCityCode: '', //同城编号
            einvoiceSupportStatus: '', //是否支持开具电子发票标识
            // source: '', //来源
            province: '', //省份名称
            cityHierarchyLevel2: '', //二级行政区城市名称
            // isDelete: '', //是否启用
            // janeSpell: '', // 车站简拼
            // serialNumber: '', //序号       
            // stationStr: '', //车站信息（拼接成一个字符）
            // version: '', //字典版本号
            // createDate: '', //创建时间
            // updateDate: '', //更新时间
        },
        rule: {
            serialNumber: [{ required: true, message: '请输入序号', trigger: 'blur' }], 
            stationName: [{ required: true, message: '请输入车站名称', trigger: 'blur' }], 
            stationJaneSpell: [{ required: true, message: '请输入车站简拼', trigger: 'blur' }], 
            stationTelegraphicCode: [{ required: true, message: '请输入车站电报码', trigger: 'blur' }], 
            allJaneSpell: [{ required: true, message: '请输入车站全拼', trigger: 'blur' }], 
            hasSameCityStationFlag: [{type:"number", required: true, message: '请输入同城车站标识', trigger: 'blur' }], 
            // sameCityCode: [{ required: true, message: '请输入同城编号', trigger: 'blur' }], 
            einvoiceSupportStatus: [{type:"number", required: true, message: '请输入电子发票标识', trigger: 'blur' }], 
            province: [{ required: true, message: '请输入省份名称', trigger: 'blur' }], 
            cityHierarchyLevel2: [{ required: true, message: '请输入差标城市名称', trigger: 'blur' }], 
        },
        actions: [
          {
            /**
              text: "按钮label",
              theme: "warning",
              icon: "plus-round",
              action: "actionName1", //可以通过 SetActionsState  actionName1 的 state 来设置这个按钮是否 loading
          */
            text: this.$t('common.save'),
            theme: 'primary',
            action:"save",
            handle: debounce(()=>this.handleSave(),300),
            loading: false
          },
          {
            text: this.$t('common.close'),
            handle: () => {
              this.$emit('Close')
            }
          }
        ],
      }
    },
    computed: { 
        haveSameStation: function() {
        return this.formInfo.hasSameCityStationFlag === 1
      },
    },
    created: function() {
      this.$Spin.show({
          render: (h) => {
              return h('div', [
                  h('Icon', {
                      'class': 'spin-icon-load',
                      props: {
                          type: 'ios-loading',
                          size: 18
                      }
                  }),
                  h('div', '加载中...')
              ])
          }
      });
      //#region  sidelipPage 配置
      if (this?.TrainStation?.id) {
        this.$emit('SetTitle', '编辑火车站点')
      } else {
        this.$emit('SetTitle', '新增火车站点')
      }
      this.$emit('SetPageWidth', 700)
      this.$emit('SetPageActions', this.actions)
      //#endregion
      this.init() 
    },
    mounted: function() {},
    methods: {  
      init() { 
        console.log('this.TrainStation :>> ', this.TrainStation);
        if (this?.TrainStation?.id) {
           this.formInfo = Object.assign({},this.TrainStation);
        }
        this.$Spin.hide();
        this.loadingFinish = true;  
      },
      handleSave() {
        this.$refs['formInfo'].validate(valid => {
          if (valid) {
            this.actions[0].loading = true
            let param = this.formInfo
            apiTrainStationAdd(param)
            .then(data => {
                console.log('保存失败 :>> ', data);
                this.actions[0].loading = false
                if (data.code === "0") {
                this.$message.success({
                    content: '保存成功',
                    duration: 3
                });
                this.$emit('Close', true); 
                } else {
                this.$message.error({
                    content: data.message || "保存失败",
                    duration: 3
                });
                }  
            })
            .catch(data => {
            this.actions[0].loading = false 
            })
          }
        })
      },
    }
  }
  </script>
  <style scoped lang="less">
  .detail-form {
    background: #f4f6fd;
    .form {
      background: #fff;
      padding: 24px 24px 12px 24px;
      .ivu-row {
        margin-bottom: 0px;
        .last-item {
          margin-bottom: 0px;
        }
      }
      .form-title {
        display: block;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 600;
      }
    }
  }
  </style>
</script>